<template>
  <section class="loginContainer">
    <div class="loginInner">
      <div class="login_header">
        <p class="login_logo">外卖</p>
        <div class="login_header_title">
          <a href="javascript:" class="on">短信登录</a>
          <a href="javascript:">密码登录</a>
        </div>
      </div>
      <div class="login_content">
        <form action>
          <div class="on">
            <section class="login_message">
              <input type="tel" maxlength="11" placeholder="手机号" />
              <button disabled="disabled" class="get_verification">获取验证码</button>
            </section>
            <section class="login_verification">
              <input type="tel" maxlength="8" placeholder="验证码" />
            </section>
            <p class="login_hint">温馨提示：未注册外卖账号的手机号，登录时将自动注册</p>
          </div>
          <div>
            <section>
              <section class="login_message">
                <input type="tel" maxlength="11" placeholder="手机/邮箱/用户名" />
              </section>
              <section class="login_verification">
                <input type="tel" maxlength="8" placeholder="密码" />
                <div class="switch_button off">
                    <div class="switch_circle"></div>
                    <span class="switch_text">...</span>
                </div>
              </section>
              <section class="login_message">
                <input type="text" maxlength="11" placeholder="验证码" />
                <img class="get_verification" src="" alt="">
              </section>
            </section>
          </div>
          <button class="login-submit">登录</button>
        </form>
        <p class="about-our">关于我们</p>
      </div>
      <a href="javascript:" class="go_back" @click="$router.back()">
          <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-1"></i>
      </a>
    </div>
  </section>
</template>
<script>
export default {
}
</script>
<style lang="scss">
    .loginContainer{
        width: 100%;
        height: 100%;
        background-color:#fff;
        .loginInner{
            padding-top:60px;
            width: 80%;
            margin:0 auto;
            .login_header{
                .login_logo{
                    font-size: 40px;
                    font-weight: bold;
                    color:#02a774;
                    text-align: center;
                }
                .login_header_title{
                        padding-top:50px;
                        text-align: center;
                        >a{
                            color:#333;
                            font-size:14px;
                            padding-bottom: 4px;
                            &:first-child{
                                margin-right:40px;
                            }
                            &.on{
                                color:#02a774;
                                font-weight: 700;
                                border-bottom:2px solid #02a774;
                            }
                        }
                    }
            }
            .login_content{
                >form{
                    >div{
                        display: none;
                        &.on{
                            display: block
                        }
                        input{
                            width: 195px;
                            height: 40px;
                            border:none;
                            padding-left:5px;

                        }
                        .login_message{
                            margin-top:15px;
                            border:1px solid gray;
                            border-radius: 5px;
                            button{
                                border:none;
                                background-color:#fff;
                                color:gray;
                            }
                        }
                        .login_verification{
                            border:1px solid gray;
                            margin-top:15px;
                            border-radius: 5px;
                        }
                        p{
                            color:gray;
                            font-size:14px;
                            margin-top:10px;
                        }
                    }
                    .login-submit{
                        width: 300px;
                        height: 45px;
                        color:#fff;
                        background-color:green;
                        border:none;
                        border-radius: 5px;
                        margin-top:30px;
                    }
                }
                .about-our{
                    color:gray;
                    text-align: center;
                    margin-top:20px;
                }
            }
            .icon-changyongtubiao-xianxingdaochu-zhuanqu-1{
                position:fixed;
                top:5px;
                left:5px;
                font-size:25px;
                color:gray;
            }
        }
    }
</style>
